<template>
	<view class="foot flex flex-column align-center justify-center">
		<view class="mx-3 w-100 flex justify-between align-center my-3" @click="handleTabs('/pages/card/Card_Purchase_Center')">
			<view class="font font-weight-bold">可购储值卡</view>
			<view>
				<text class="font text-muted">更多</text>
				<uni-icons type="right" size="15" color="#828d96"></uni-icons>
			</view>
		</view>
		<view class="f1 flex justify-center w-100">
			<view class="f1_f mb-2" v-for="(item,i) in tableData" :key="i" @click="handleTabs('/pages/card/Purchase_Crad?Prepayment_Card_Scheme_SerialNumber='+item.Prepayment_Card_Scheme_SerialNumber)" style="position: relative;overflow: hidden;">
				<image style="height: 100%;" :src="Domain_IMG + item.Picture_URL" mode="heightFix"></image>
				<view class="text-white" style="position: absolute;top: auto;right: 0;bottom: 0;left: 0;">
					<view class="font-lg text-ellipsis font-weight-bolder text-center ">{{item.Prepayment_Card_Scheme_Name}}</view>
					<view class="font text-right"><text>￥{{item.Starting_Amount}}</text></view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	const app = getApp()
	import {WXPrepaymentCardAll} from '@/api/group.js'
	export default {
		data() {
			return {
				Domain_IMG:app.globalData.Domain_IMG,
				form:{
					page:1,
					limit:5,
					Enterprise_Info_SerialNumber:app.globalData.Enterprise_Info_SerialNumber,
					App_ID:app.globalData.App_ID,
				},
				tableData:[],
				total:1,
			};
		},
		mounted() {
			this.getAllCard(this.form)
		},
		methods: {
			handleTabs(url) {
				uni.navigateTo({
					url,
				});
			},
			async getAllCard(data){
				uni.showLoading({
					title:'加载中...'
				})
				const res = await WXPrepaymentCardAll(data)
				console.log('卡',res)
				uni.hideLoading()
				if(res.Status=='success'){
					this.tableData = res.tableData.splice(0,2)
					this.total = Number(res.limit)
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	.foot {
		.f1 {
			display: flex;
			flex-wrap: wrap;
			justify-content: space-between;
	
			.f1_f {
				width: 47%;
				// border: 1px solid red;
				height: 300rpx;
				border-radius: 20rpx;
				background-color: #fff;
				display: flex;
				justify-content: space-around;
				flex-direction: column;
				box-sizing: border-box;
			}
		}
	}
</style>